<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '点单详情',
  },
}
</route>

<template>
  <view class="common-detail-container">
    <view class="detail-content">
      <view
        class="common-detail-info-header"
        v-if="detail?.coverUrl"
      >
        <image
          class="img"
          :src="formatUrlString(detail.coverUrl)[0]"
          mode="aspectFill"
        />
      </view>
      <view class="common-detail-info-body">
        <view class="detail-info-title">
          <view class="detail-info-title__line"></view>
          <text>{{ detail.orderId_dictText }}</text>
        </view>
        <view
          class="detail-info-desc"
          v-if="detail.activityNote"
        >
          {{ detail.activityNote }}
        </view>
        <view class="detail-info-others">
          <view class="others-line"></view>
          <view class="others-item">
            <view class="others-item__label">
              <view class="others-item__label-icon">
                <wd-icon
                  name="home"
                  size="28rpx"
                ></wd-icon>
              </view>
              <view class="others-item__label-text">活动礼堂</view>
            </view>
            <view class="others-item__value">
              {{ detail?.hallId_dictText }}
            </view>
          </view>
          <view class="others-item">
            <view class="others-item__label">
              <view class="others-item__label-icon">
                <wd-icon
                  name="user"
                  size="28rpx"
                ></wd-icon>
              </view>
              <view class="others-item__label-text">预约人</view>
            </view>
            <view class="others-item__value">
              {{ detail?.userId_dictText }}
            </view>
          </view>
          <view class="others-item">
            <view class="others-item__label">
              <view class="others-item__label-icon">
                <wd-icon
                  name="time"
                  size="28rpx"
                ></wd-icon>
              </view>
              <view class="others-item__label-text">预约日期</view>
            </view>
            <view class="others-item__value">{{ detail?.resource }}</view>
          </view>
          <view class="others-item">
            <view class="others-item__label">
              <view class="others-item__label-icon">
                <wd-icon
                  name="location"
                  size="28rpx"
                ></wd-icon>
              </view>
              <view class="others-item__label-text">地址</view>
            </view>
            <view class="others-item__value">
              {{ detail?.activityAddress }}
            </view>
          </view>
        </view>
      </view>
      <!-- <view>
        <view class="data-item-title">名称：{{ detail?.orderId_dictText }}</view>
        <view class="data-item-tip">礼堂：{{ detail?.hallId_dictText }}</view>
        <view class="data-item-tip">预约人：{{ detail?.userId_dictText }}</view>
        <view class="data-item-tip">预约日期：{{ detail?.resource }}</view>
        <view class="data-item-tip">介绍：{{ detail?.activityNote }}</view>
        <view class="data-item-tip info-address">
          <text>地址：</text>
          {{ detail?.activityAddress }}
        </view> -->
    </view>
    <view
      class="detail-footer"
      v-if="detail?.status === 'start'"
    >
      <view>
        <wd-button
          block
          @click="openAudit"
        >
          审批
        </wd-button>
      </view>
      <view class="m-t-2">
        <wd-button
          block
          @click="openBack"
          type="error"
        >
          驳回
        </wd-button>
      </view>
    </view>

    <!-- 表单填写 -->
    <wd-message-box selector="wd-message-box-slot">
      <wd-cell-group>
        <wd-textarea
          label="备注"
          clearable
          v-model="reason"
          placeholder="请输入备注"
        />
      </wd-cell-group>
    </wd-message-box>
  </view>
</template>

<script setup>
import OrderApi from '@/service/order'
import { useMessage } from 'wot-design-uni'
import { formatUrlString } from '@/utils'

const detail = ref(null)

const message = useMessage('wd-message-box-slot')
const reason = ref('')

const getDetail = async (id) => {
  const ret = await OrderApi.getOrderSubscribeDetail({ id })
  const { code, result } = ret
  if (code === 200) {
    detail.value = result
  }
}

const openAudit = () => {
  message
    .confirm({
      title: '通过',
    })
    .then(async () => {
      const ret = await OrderApi.approveOrderSubscribe({
        orderSubscribeId: detail.value.id,
        note: reason.value,
        result: 'pass',
      })
      const { code, success, message } = ret
      if (code === 200 && success) {
        uni.showToast({
          title: message,
        })
        // getDetail(detail.value.id)
        detail.value.status = 'pass'
        // 通知上一页列表刷新
        uni.$emit('updateOrderSubscribe')
        // 1秒后返回列表
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      }
    })
    .catch((error) => {
      console.log(error)
    })
}

const openBack = () => {
  message
    .confirm({
      title: '驳回',
    })
    .then(async () => {
      const ret = await OrderApi.approveOrderSubscribe({
        orderSubscribeId: detail.value.id,
        note: reason.value,
        result: 'reject',
      })
      const { code, success, message } = ret
      if (code === 200 && success) {
        uni.showToast({
          title: message,
        })
        // getDetail(detail.value.id)
        detail.value.status = 'reject'
        // 通知上一页列表刷新
        uni.$emit('updateOrderSubscribe')
        // 1秒后返回列表
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      }
    })
    .catch((error) => {
      console.log(error)
    })
}

onLoad((options) => {
  getDetail(options.id)
})
</script>
